{% extends 'base.html' %}
{% load static %}

{% block title %}{{ move.num }} - 影片详情{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'moves/css/detail.css' %}">
    <style>
        :root {
            --backdrop-url: url('{{ move.get_background_poster.poster.url }}');;
        }

    </style>

{% endblock %}

{% block content %}
    <!-- 电影头部区域 -->
    <div class="movie-header">
        <div class="movie-backdrop"></div>
        <div class="movie-content">
            <h1 class="movie-title">{{ move.num }}</h1>

            <div class="action-buttons">
                <a href="#" class="play-button">
                    <i class="fas fa-play"></i> 播放
                </a>
                <a href="#" class="secondary-button">
                    <i class="fas fa-bookmark"></i> 加入收藏
                </a>
            </div>

            <div class="movie-meta">
                <div class="meta-item">
                    <span class="meta-rating">{{ move.rating }}</span>
                    <i class="fas fa-star meta-icon"></i>
                </div>
                <div class="meta-item">
                    <span class="meta-value">{{ move.premiered }}</span>
                    <i class="fas fa-calendar meta-icon"></i>
                </div>
                <div class="meta-item">
                    <span class="meta-value">{{ move.countrycode }}</span>
                    <i class="fas fa-globe meta-icon"></i>
                </div>
                <div class="meta-item">
                    <span class="meta-value">{{ move.runtime }}分钟</span>
                    <i class="fas fa-film meta-icon"></i>
                </div>
                <div class="meta-item">
                    <span class="meta-value">电影</span>
                    <i class="fas fa-ticket-alt meta-icon"></i>
                </div>
            </div>

            <p class="movie-description">
                {{ move.plot }}
            </p>
        </div>
    </div>

    <!-- 演职人员区域 -->
    <div class="section">
        <div class="section-header">
            <h2 class="section-title">演职人员</h2>
        </div>

        <div class="cast-grid">
            {% for actor in actors %}
                <div class="cast-member">
                    <img src="{{ actor.actor.get_avatar_url }}" alt="{{ actor.name }}" class="cast-img">
                    <div class="cast-info">
                        <div class="cast-name">{{ actor.actor.name }}</div>

                        <div class="cast-role">{{ actor.actor.type }}</div>
                    </div>
                </div>
            {% endfor %}


        </div>
    </div>

    <!-- 剧照区域 -->
    <div class="section">
        <div class="section-header">
            <h2 class="section-title">剧照与海报</h2>
        </div>

        <div class="gallery-grid">
            {% for stage in move.get_stage_poster %}

                <div class="gallery-item">
                    <img src="{{ stage.poster.url }}" alt="Scene 1" class="gallery-img">
                </div>
            {% endfor %}

        </div>
    </div>

    <!-- 类似电影推荐区域 -->
    <div class="section">
        <div class="section-header">
            <h2 class="section-title">类似电影推荐</h2>
            <a href="{% url 'movesList' %}" class="view-all">查看全部</a>
        </div>


        <div class="recommendations">

            {% for rec_film in rec_movies %}
                <a href="{% url 'movesDetails' rec_film.id %}">
                    <div class="rec-movie">
                        <img src="{{ rec_film.poster }}" alt="图片缺失" class="rec-poster">

                        <div class="rec-info">
                            <div class="rec-title">{{ rec_film.num }}</div>
                            <div class="rec-meta">
                                <span>{{ rec_film.year }}</span>
                                <span class="rec-rating">{{ rec_film.rating }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            {% endfor %}
        </div>
    </div>
{% endblock %}


{% block js %}
    <script src="{% static 'moves/js/detail.js' %}"></script>
{% endblock %}
